<template>
	<view class="indexBox" :style="{paddingTop:wxStyleTop.top+ 'px'}">
		<!-- #ifdef APP -->
		<!-- 	<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth"
			permissionID="WRITE_EXTERNAL_STORAGE"></yk-authpup> -->
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<!-- <view class="weixinJl" :style="{height:wxStyleTop.top + 'px'}"></view> -->
		<!-- #endif -->
		<view class="flex pl24 pr24" style="position: relative;z-index: 999;">

			<view class="tabsBox">
				<goods-tabs bg-color='none' gutter='20' active-color='#000' :list="navList" :is-scroll="true"
					v-model="indexTabs" name="text_show" @change="change('tabs',$event)"></goods-tabs>
			</view>
			<view class="flex_ac ml8" @click="$wanlshop.auth('/pages/page/search?type=goods')">
				<view class="ml8">
					<u-icon name="search" color="#000" size="28"></u-icon>
				</view>
			</view>
		</view>

		<scroll-view :scroll-y="true" class="scoll-viewS" @scroll="scroll" @scrolltolower="scrolltolower"
			lower-threshold="200" style="touch-action: none;" :scroll-top="scrollTop"
			@refresherrefresh='refresherrefresh' :refresher-triggered="triggered" :refresher-enabled='indexTabs == -1'
			:refresher-threshold='100' scroll-with-animation="true">
			<!-- 商城 -->
			<view class="indexDataBox" v-if="indexTabs == 1">
				<wanlIndexShop ref="wanlIndexShoprefs"></wanlIndexShop>
			</view>
			<!-- 订单广场 -->
			<view class="indexDataBox" v-if="indexTabs == 2">
				<view class="listSquare">
					<goods-tabs bg-color='none' active-color='#FD5241' :list="navTitleList" :is-scroll="true"
						v-model="tabCurrentIndex" @change="tabClick" name="text_show" gutter="130"></goods-tabs>
					<swiper :current="tabCurrentIndex" style="flex: 1;width: 100%;" duration="300" @change="changeTab"
						class="swiperBox">
						<swiper-item class="tab-content" v-for="(tag, key) in navListSwiper" :key="tag.state">
							<scroll-view style="height: 100%;" class="list-scroll-content" scroll-y
								@scrolltolower="loadData" :scroll-top="scrollTop" @refresherrefresh='refresherrefresh1'
								:refresher-triggered="triggered1" :refresher-enabled='true' :refresher-threshold='100'
								scroll-with-animation="true">
								<!-- 空白页 -->
								<wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.list.length === 0" />
								<!-- 订单列表 -->
								<block v-if="tag.list.length > 0">
									<view class="u-p-t-32" v-for="(goods, index) in tag.list" :key="index">
										<!-- 商品选择 -->
										<view @click="xiangqing(goods,index,key)"
											class="forbox wanl-cart-goods u-flex-col padding-bj"
											style="align-items: stretch;">
											<view class="flex_ac">
												<u-icon v-if='goods.level == 3'
													name="https://img.aibbyp.com/wechatUser/jiazhuang.png"
													size="60"></u-icon>
												<u-icon v-if='goods.level == 2'
													name="https://img.aibbyp.com/wechatUser/gongzhuang.png"
													size="60"></u-icon>
												<view class="f32 fb ml12">
													{{goods.title}}
												</view>
												<u-tag v-if='goods.type == 1' class="ml12" text="整装" size="mini"
													mode="plain" />
												<u-tag v-if='goods.type == 2' class="ml12" text="局部改造" size="mini"
													mode="plain" />
												<u-tag v-if='goods.type == 3' class="ml12" text="维修" size="mini"
													mode="plain" />
												<view class="cf64 flex1 tar f28 fb" v-if="key == 1">
													<!-- 工匠价格 -->
													￥{{goods.price}}
												</view>
											</view>

											<view class="flex mt24 c3d f28 ">
												<image v-if="goods.images && goods.images[0]" class="goodsimg"
													:src="$wanlshop.oss(goods.images[0])" mode="">
												</image>
												<view class="ml24 flex1 minwidth f24">
													<scroll-view :scroll-top="scrollTop" scroll-x="true"
														class="scroll-Y">
														<view class="flex">
															<view class="tags" v-for="(item,key) in goods.label"
																:key="key">
																{{item}}
															</view>
														</view>
													</scroll-view>
													<view class="mt12 overflow_1">
														<u-icon name="map" color="#FD5241" size="28"></u-icon>
														<text class="ml16 f28 c3d">
															{{goods.address}}
														</text>
													</view>
													<view class="mt12">
														<u-icon name="clock" color="#FD5241" size="28"></u-icon>
														<text class="ml16 f28 c3d">
															{{goods.start_date_text}} ~ {{goods.end_date_text}}
														</text>
													</view>
												</view>
											</view>
											<view class="flex_sb mt24 flex_ac">
												<view class="mt8">
													<view class="f28 cf64 fb" v-if="key == 0">
														￥{{goods.price}}
													</view>
													<view class="f24 flex_ac mb8" v-if="key == 1">

														<image class="imgtx"
															:src="$wanlshop.oss(goods.user_worker.avatar)" mode="">
														</image>
														<view class="ml12">
															{{goods.user_worker.name}}
														</view>
													</view>
													<view class="info f24">
														距您当前 {{goods.distance}}km
													</view>
												</view>
												<view class="">

													<u-button open-type="liveActivity" class="ml12" type="error"
														size="medium" shape="circle" v-if="key == 0"
														@click="lijiqiangdan(goods,index)">立即抢单</u-button>
													<u-button class="ml12" type="primary" size="medium" shape="circle"
														v-if="key == 1 && user.level == 2" open-type="liveActivity"
														@click="shengqingjiaru(goods, index)">申请加入</u-button>
												</view>
											</view>

										</view>
									</view>
								</block>
								<uni-load-more :status="tag.loadingType" :content-text="contentText"
									v-if='tag.list && tag.list.length != 0' />
								<view class="edgeInsetBottom"></view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 抖音下拉视频 -->
			<view class="indexDataBox" v-if="indexTabs == 0">
				<view class="" v-if="indexTabs == 1">
					<view class="xhdzpBox" v-if="jdzpShow">
						<image @click="jdzpShow = false" class="scxjdzp"
							src="https://img.aibbyp.com/wechatUser/scxjdzp.png" mode=""></image>
						<image @click="$wanlshop.to('/pages/luckDraw/luckDraw')" class="imgxjdzp"
							src="https://img.aibbyp.com/wechatUser/imgxjdzp.png" mode=""></image>
					</view>
					<!-- 看视频得红包 -->
					<view class="kspdhb" v-if="false">
						<uni-transition ref="ani" :mode-class="showtransition ? 'slide-bottom':'fade'"
							:show='showtransition' custom-class="transition">
							<view class="jiaqian">
								<text class="text">+2.02元</text>
							</view>
						</uni-transition>
						<canvas canvas-id="loadingCanvas" id="loadingCanvas" class="loading-canvas" :style="{
							    width: canvasSize + 'px',
							    height: canvasSize + 'px'
							  }"></canvas>
						<image class="hongbao" src="https://img.aibbyp.com/wechatUser/hongbao.png" mode="">
						</image>
						<view class="hbbac f24 tac cf">
							21.12 <text class="f16 ml4">元</text>
						</view>

					</view>
				</view>
				<!-- 推荐 关注 按钮 -->
				<view class="tuijianguanzhu flex" v-if='indexTabs == 0 '>
					<view class="tuijian" :class="{'guanzhu':tjgzNumber==0}" @click="tjgz(0)">
						推荐
					</view>
					<view v-if="gzsptotal>0" class="tuijian ml32" :class="{'guanzhu':tjgzNumber==1}" @click="tjgz(1)">
						关注
					</view>
					<view class="tuijian ml32" :class="{'guanzhu':tjgzNumber==2}" @click="tjgz(2)">
						{{local}}
					</view>
				</view>
				<view class="videoSwiper">
					<view class="uni-padding-wrap">
						<view class="page-section swiper">
							<view class="page-section-spacing">
								<swiper v-if="PayVideo && PayVideo.length> 0" class="swiper"
									@animationfinish='animationfinish' @change="changefun" :indicator-dots='false'
									:current="current" :circular="false" :vertical="true">
									<swiper-item v-for="(item,index) in PayVideo" :key="index"
										style="touch-action: none;">
										<!-- video -->
										<view class="new-swiper-item" v-if="item.type == 'video' && index == current"
											@click="btnPayVideo(item)"
											:class="item.type == 'video'?'uni-bg-black':'uni-bg-black1'">
											<!-- #ifdef MP-WEIXIN -->
											<!-- <m-video @tap="btnPayVideo(item)" style="width: 100%;height: 100%;"
													token="gWpV7sZZJ96HS5SkVc7KnEOXHEnDpwA6tBZFQH3rsFM="
													:id="`id${index}`" auto-pause-if-navigate http-cache
													auto-pause-if-open-native :custom-cache="false"
													:show-play-btn='false' :show-fullscreen-btn="false"
													:show-center-play-btn='true' :controls="true"
													:enable-play-gesture='true' :src="item.videoUrl" loop
													@timeupdate="videoTimeupdate" :enable-progress-gesture="true"
													@seeked='videoSeeked'>
												</m-video> -->
											<!-- #endif -->
											<!-- #ifdef H5 -->
											<!-- #endif -->
											<video :id="`id${index}`" style="width: 100%;height: 100%;"
												:autoplay="false" auto-pause-if-navigate http-cache
												auto-pause-if-open-native :custom-cache="false" :show-play-btn='false'
												:show-fullscreen-btn="false" :show-center-play-btn='true'
												:controls="true" :enable-play-gesture='true' :src="item.videoUrl" loop
												@timeupdate="videoTimeupdate" :enable-progress-gesture="true"
												@seeked='videoSeeked'>
											</video>
											<!-- #ifdef APP -->
											<DomVideoPlayer :ref="videoRefs('id'+index)"
												style="width: 100%;height: 100%;z-index: 2;" :id="`id${index}`"
												:autoplay="false" auto-pause-if-navigate http-cache
												auto-pause-if-open-native :custom-cache="false" :show-play-btn='false'
												:show-fullscreen-btn="false" :show-center-play-btn='true'
												:controls="true" :enable-play-gesture='true' :src="item.videoUrl" loop
												:enable-progress-gesture="true" @seeked='videoSeeked'>
											</DomVideoPlayer>
											<!-- #endif -->
											<!-- 暂停键 -->
											<image class="iconVideoStop" v-if="videoType"
												src="https://img.aibbyp.com/wechat/images/nHome/videozt.png" mode="">
											</image>
										</view>
										<!-- image -->
										<view v-if=" item.type == 'image'&& index == current " class="new-swiper-item "
											:class="item.type == 'video'?'uni-bg-black':'uni-bg-black1'">
											<swiper :style="swiperheight" class="swiper square-dot" circular
												indicator-color='#ccc' indicator-active-color='#3065FA'
												:indicator-dots="true" :interval="50000" :duration="500"
												style="max-height: 1260rpx;">
												<swiper-item v-for="(item1,indeximg) in item.imageUrl" :key="indeximg"
													style="touch-action: none;">
													<image class="imgSwiper"
														@click.stop="previewImage(item.imageUrl,indeximg)"
														:src="$wanlshop.oss(item1)" mode="widthFix">
													</image>
												</swiper-item>
											</swiper>

										</view>
										<!-- 最下面发表看法 -->
										<!-- image 评论 -->
										<view class="bottomBox"
											v-if="shopData[current] && item.type == 'image' && index == current">
											<view class="flex1" style="height: 100%;">
												<input class="uniInput" :focus='focus1' v-model="inputValue"
													placeholder="发表你的看法" confirm-type="send" @confirm="btnComment"
													:border="true" />
											</view>
											<view class="ml28 flex_ac">
												<view class="ml26">
													<u-icon @click="btnLike1(0)" name="heart" size="70"
														v-if="shopData[current].is_like == 0"></u-icon>
													<u-icon @click="btnLike1(1)" name="heart-fill" size="70"
														v-if="shopData[current].is_like == 1" color="#FF2A2A"></u-icon>
												</view>
												<view class="c3d f28 ml4">
													{{shopData[current].likes}}
												</view>
												<view class="ml24" @click="btnfocus">
													<u-icon name="chat" size="70"></u-icon>
												</view>
												<view class="c3d f28 ml4">
													{{shopData[current].comments}}
												</view>
												<image v-if="shopData[current].is_collect == 0" @click="btnCollect(0)"
													class="ml24" style="width: 70rpx;height: 70rpx;"
													src="https://img.aibbyp.com/wechat/images/nHome/shoucang4.png"
													mode="">
												</image>
												<image v-if="shopData[current].is_collect == 1" @click="btnCollect(1)"
													class="ml24" style="width: 70rpx;height: 70rpx;"
													src="https://img.aibbyp.com/wechat/images/nHome/shoucang2.png"
													mode="">
												</image>

												<view class="c3d f28 ml4">
													{{shopData[current].collect}}
												</view>
												<button class="buttonOpen ml24 mt8" open-type="share">
													<image style="width: 60rpx;height: 36rpx;"
														src="https://img.aibbyp.com/wechat/images/nHome/zf.png" mode="">
													</image>
												</button>
											</view>
										</view>
										<!-- video按钮 -->
										<view class="videoIcon"
											v-if="item.type == 'video' && shopData[current] && index == current">
											<!-- 头像 -->
											<view class="acatarBox">
												<view class="acatar" v-if='shopData[current]&&shopData[current].shop'>
													<image class="imgAcatar"
														:src="$wanlshop.oss(shopData[current].shop.avatar)" mode=""
														@click="$wanlshop.auth(`/pages/note/indexList?id=${shopData[current].user_id}`)">
													</image>
												</view>
												<view class="iconPlus" @click="btnGZ"
													v-if="shopData[current].follow == false">
													<image class="iconPlusImage"
														src="https://img.aibbyp.com/wechat/images/nHome/tj2.png"
														mode="">
													</image>
												</view>
											</view>
											<!-- 点赞 -->
											<view class="ml26 mt40">
												<u-icon @click="btnLike1(0)" name="heart-fill" size="70"
													v-if="shopData[current].is_like == 0" color="#fff"></u-icon>
												<u-icon @click="btnLike1(1)" name="heart-fill" size="70"
													v-if="shopData[current].is_like == 1" color="#FF2A2A"></u-icon>
											</view>
											<view class="cf f28 mt4">
												{{shopData[current].likes}}
											</view>
											<!-- 评论 -->
											<view class="mt20" @click="btnfocus">
												<u-icon name="chat-fill" size="70" color="#fff"></u-icon>
											</view>
											<view class="cf f28 mt4">
												{{shopData[current].comments}}
											</view>
											<!-- 收藏 -->
											<view class="mt20">
												<image v-if="shopData[current].is_collect == 0" @click="btnCollect(0)"
													style="width: 80rpx;height: 80rpx;"
													src="https://img.aibbyp.com/wechat/images/nHome/shoucang1.png"
													mode="">
												</image>
												<image v-if="shopData[current].is_collect == 1" @click="btnCollect(1)"
													style="width: 80rpx;height: 80rpx;"
													src="https://img.aibbyp.com/wechat/images/nHome/shoucang2.png"
													mode="">
												</image>
											</view>
											<view class="cf f28 mt4">
												{{shopData[current].collect}}
											</view>
											<!-- 分享 -->
											<!-- #ifdef MP-WEIXIN -->
											<button class="buttonOpen mt12" open-type="share">
												<image style="width: 70rpx;height: 60rpx;"
													src="https://img.aibbyp.com/wechat/images/nHome/fx2.png" mode="">
												</image>
											</button>
											<!-- #endif -->

										</view>
										<!-- video goods 有商品链接 -->
										<view class="videoGoods" :class="{'videoGoods1':indexTabs == 0}"
											v-if="item.type == 'video' && shopData[current] && index == current">
											<view class="dwShop cf">
												<image v-if="shopData[current].goods"
													@click="goGoods(shopData[current].goods[0].id)"
													style="width: 288rpx;height: 60rpx;"
													src="https://img.aibbyp.com/wechat/images/nHome/gwcwz.png" mode="">
												</image>

												<view class="f28">
													{{shopData[current].title}}
												</view>
												<view class="f24 ce overflow_2">
													{{shopData[current].content}}
												</view>
												<view class="flex">
													<view class="f24">
														{{shopData[current].city}}
													</view>
													<view class="f24 ml12">
														{{shopData[current].createtime_text}}
													</view>
												</view>

											</view>

										</view>
										<!-- img goods 有商品链接 -->
										<view class="imageBox" v-if="item.type == 'image' && shopData[current]">
											<!-- 店铺信息 -->
											<view class="pl32 pr32" v-if="shopData[current]">
												<view class="flex_sb flex_ac mt32">
													<image class="imgAcatar"
														:src="$wanlshop.oss(shopData[current].shop.avatar)" mode=""
														@click="$wanlshop.auth(`/pages/note/indexList?id=${shopData[current].user_id}`)">
													</image>
													<view class="f28 fb ml20 flex1">
														{{shopData[current].shop.shopname}}
													</view>
													<view class="gz f24 ml20 cf" @click="btnGZ">
														{{shopData[current].follow ? '已关注':'关注'}}
													</view>
												</view>
												<view class="flex1 f28 mt20 fb">
													{{shopData[current].title}}
												</view>
												<view class=" f24 c3d overflow_2">
													{{shopData[current].content}}
												</view>
											</view>
											<!-- 图片页面 下面数据 商品信息 评论 -->
											<image v-if="shopData[current].goods"
												@click="goGoods(shopData[current].goods[0].id)"
												style="width: 288rpx;height: 60rpx;" class="ml32 mt12"
												src="https://img.aibbyp.com/wechat/images/nHome/gwcwz.png" mode="">
											</image>

										</view>

									</swiper-item>


								</swiper>
								<wanl-empty class="mt36" text="没有找到相关视频" v-else />
							</view>
						</view>
					</view>
					<!-- 视频播放弹出框 评论-->
					<u-popup v-if="popupShow" v-model="popupShow" mode="bottom" border-radius="32">

						<view class="popupBox">
							<view class="flex_start goodsBox mt20" v-if="shopData[current].goods"
								v-for="(i,lx) in shopData[current].goods" :key="lx">
								<view class="" @click="goGoods(shopData[current].id)">
									<image class="goodsImg" :src="$wanlshop.oss(i.image)" mode="">
									</image>
								</view>
								<view class="c3d ml24 flex1" @click="goGoods(shopData[current].id)">
									<view class="overflow_2">
										{{i.title}}
									</view>
									<view class="error tar fb">
										￥{{i.price}}
									</view>
								</view>

							</view>
							<view class="ml32 flex1 tar closeIcon">
								<u-icon name="close" size="32" @click="popupShow = false"></u-icon>
							</view>
							<scroll-view :scroll-y="true" class="mt12"
								:class="shopData[current].goods ? 'popupBoxScroll':'popupBoxScroll1'"
								@scrolltolower="scrolltolower1" lower-threshold="300" style="touch-action: none;">
								<view class="mt24 f32 c6 fb tac">
									共{{shopData[current].comments}}条评论
								</view>

								<view class="commentsBox mt20">
									<view class="mb20" v-for="(item,iIndexa) in commentsData" :key="iIndexa">
										<view class="">
											<view class="flex_start">
												<image class="img" :src="$wanlshop.oss(item.user.avatar) "
													@click="$wanlshop.auth(`/pages/note/indexList?id=${item.user_id}`)"
													mode="">
												</image>
												<view class="f24 flex1 ml20">
													<view class="info">
														{{item.user.nickname}}
													</view>
													<view class="c3 f14">
														{{item.content}}
													</view>
													<view class="info f20">
														{{item.createtime_text}} {{item.city}}
														<text class="c3 ml8" @click="btnHH(item.id)"> 回复</text>
													</view>
												</view>
												<view class="ml32 flex_yy_center mt20">
													<u-icon @click="btnLike(item.id,iIndexa,1,'father')"
														name="heart-fill" color="#FF2A2A"
														v-if="item.is_like == 1"></u-icon>
													<u-icon @click="btnLike(item.id,iIndexa,0,'father')" name="heart"
														v-if="item.is_like == 0"></u-icon>
													<view class="f20 info">
														{{item.likes}}
													</view>
												</view>
											</view>
											<view class="ml55 mt20 mb20" v-for="(data,index1s) in item.children"
												:key="index1s">
												<view class="flex_start">
													<image class="img" :src="$wanlshop.oss(data.user.avatar) " mode="">
													</image>
													<view class="f24 flex1 ml20">
														<view class="info">
															{{data.user.nickname}}
														</view>
														<view class="c3 f14">
															<text class="info f20 mr12" v-if="data.top_nickname">
																回复给&nbsp;{{data.top_nickname}}</text>
															{{data.content}}
														</view>
														<view class="info f20">
															{{data.createtime_text}} {{data.city}}
															<text class="c3 ml8" @click="btnHH(data.id)"> 回复 </text>
														</view>
													</view>
													<view class="ml32 flex_yy_center mt20">
														<u-icon @click="btnLike(data.id,iIndexa,1,'son',index1s)"
															name="heart-fill" color="#FF2A2A"
															v-if="data.is_like == 1"></u-icon>
														<u-icon @click="btnLike(data.id,iIndexa,0,'son',index1s)"
															name="heart" v-if="data.is_like == 0"></u-icon>
														<view class="f20 info">
															{{data.likes}}
														</view>
													</view>

												</view>

											</view>
										</view>
									</view>
								</view>

								<view class="f24 info tac" v-if="!scrollType">
									没有更多数据了
								</view>
							</scroll-view>

							<view class="flex_ac inputBottom">
								<input class="uniInput" style="width: 100%;" :focus="hfFocus" @blur="hfBlur"
									v-model="inputValue" placeholder="发表你的看法" :border="true" confirm-type="send"
									@confirm="btnComment">
							</view>
						</view>
					</u-popup>
				</view>

			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="xxxx" @click="to_top" v-if="indexTabs == 1 && old.scrollTop > 500">
				<u-back-top :custom-style='customstyle' class="backTop" :scroll-top="old.scrollTop" top="500">
					<u-icon name="https://img.aibbyp.com/wechat/images/top-icon.png" size="38"></u-icon>
				</u-back-top>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="xxxx" @click="to_top" v-if="indexTabs == 0 && old.scrollTop > 500">
				<u-back-top :custom-style='customstyle' class="backTop" :scroll-top="old.scrollTop" top="10">
					<u-icon name="https://img.aibbyp.com/wechat/images/top-icon.png" size="38"></u-icon>
				</u-back-top>
			</view>
			<!-- #endif -->
			<view class="blockpopup" v-if="showpopupShare">
				<u-popup v-model="showpopupShare" mode='center' border-radius="14">
					<view class="showpopupShareBox c3d">
						<view class="f28" style="margin-top: 110rpx;">
							邀请入驻
						</view>
						<view class="flex_ac f32 mt20">
							<view class="">
								下单即可得
							</view>
							<text class="f40 fb">高额返佣！</text>
						</view>
						<view class="flex_ac mt80">
							<view class="info f28 qx" @click="showpopupShare = false">
								取消
							</view>
							<button open-type="share" class="shareBox" @click="onShare">去分享</button>
						</view>
					</view>
				</u-popup>
			</view>
		</scroll-view>
		<u-mask :show="showmask" v-if="showmask">
			<view class="pg70">
				<view class="yhjtc">
					<view class="mt234">

						<view class="yhj flex_ac" v-for="(item,key) in homePopList.slice(0, 3)" :key="key">
							<view>
								<text class="f60 fb">{{item.price}} </text>
								<text class="f28 ml4">元</text>
							</view>
							<view class="ml20 cf flex1 overflow_1">
								<view class="f28 overflow_1">
									{{item.name}}
								</view>
								<view class="f22">
									<text v-if="item.type == 'reduction'">满{{item.limit}}可用</text>
									<text v-if="item.type == 'discount'">{{item.discount}}折</text>
									<text v-if="item.type == 'shipping'">包邮</text>
								</view>
							</view>
						</view>
					</view>
					<view class="btns flex_yy_center" @tap.stop="$wanlshop.to('/pages/user/coupon/list')">
						<view class="ljsy cf f32">
							立即使用
						</view>
						<view class="mt16 c3d f20">
							在共<text class="error ml4 mr4">{{homePopList.length}} </text>张 <text
								class="error ml4 mr4">我的-优惠券</text> 中查看
						</view>
					</view>
					<view class="closeyhj" @tap.stop='showmask = false'>
						<u-icon name="https://img.aibbyp.com/wechat/images/closeyhj.png" size="58"></u-icon>
					</view>
				</view>

			</view>
		</u-mask>


	</view>


</template>
<script>
	const isWeapp = typeof wx !== 'undefined' && wx.canIUse('createCanvasContext');
	// #ifdef APP
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue'
	// #endif
	import {
		getCurrentInstance
	} from 'vue';
	import {
		mapState
	} from 'vuex';
	import wanlIndexShop from "@/components/wanl-index/shop.vue"
	import wanlIndexExperience from "@/components/wanl-index/experience.vue"
	let app = getApp();

	export default {
		components: {
			wanlIndexShop,
			wanlIndexExperience,
			// #ifdef APP
			DomVideoPlayer
			// #endif
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		data() {
			return {
				showmask: false,
				homePopList: [],
				gzsptotal: 0,
				changeType: false,
				tjgzNumber: 0,
				showpopupShare: false,
				// 接单广场
				tabCurrentIndex: 0,
				navListSwiper: [{
						state: 0,
						text: '装修订单',
						text_show: '装修订单',
						key: 'normal',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '招募工匠',
						text_show: '招募工匠',
						key: 'normal',
						loadingType: 'more',
						current_page: 1,
						list: []
					},


				],

				navTitleList: [{
						state: 0,
						text: '装修订单',
						text_show: '装修订单',
						key: 'normal',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '招募工匠',
						text_show: '招募工匠',
						key: 'normal',
						loadingType: 'more',
						current_page: 1,
						list: []
					},


				],
				triggered1: false,
				// 接单广场
				customstyle: {
					opacity: 0.7,
					background: '#000',
				},
				showPage: false,
				showtransition: false,
				percentNum: 50,
				jdzpShow: false,
				page: 1,
				triggered: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				flowList: [],
				statusMore: 'loading',
				wxStyleTop: '', //微信胶囊位置

				navList: [
					// {
					// 	name: '全国'
					// },
					{
						name: '逛经验'
					},
					{
						name: '商城'
					},
				],
				indexTabs: 1, //tabs索引

				address: uni.getStorageSync('address') || {
					ad_info: {
						city: '成都市'
					}
				}, //定位信息
				// ------ 视频页面 ---- 数据
				swiperImg: [],
				option: {},
				shareShow: false,
				optionId: null,
				scrollType: true,
				parent_id: '',
				disableTrigger: true, //监听请求是否完成
				shopData: [],
				hfFocus: false,
				commentsData: [],
				focus1: false,
				inputValue: '',
				popupShow: false,
				PayVideo: [],
				videoList: [],
				current: 0,
				index: 0,
				videoContext: '',
				videoTitle: '',
				videoType: false,
				swiperheight: "0px",
				commentsPage: 1,
				commentsPage1: 1,
				openid: '',
				// ------ 视频页面 ---- 数据

				// ---canvas--动画
				timeupdate: {
					currentTime: null,
					duration: null,
				},
				progress: 0,
				canvasSize: uni.upx2px(100),
				lineWidth: 2,
				userInfo: uni.getStorageSync('wanlshop:user'),
				animationFrame: null,
				local: '本地',
				ctx: null, // 持久化canvas上下文
				// ---canvas--动画
			}
		},
		created() {},
		onLoad(option) {

			// 获取微信胶囊位置
			if (this.userInfo.level == 2 || this.userInfo.level == 3) {
				this.navList.push({
					name: '订单广场'
				})
				this.indexTabs = 2
			}
			if (option.type == 'ms') { //秒送分享进入
				this.indexTabs = 1
				this.$nextTick(() => {
					// 通过 ref 访问子组件实例并调用方法
					this.$refs.wanlIndexShoprefs.setSwiperCurrent(2);
				});
			}

			let _this = this
			// #ifndef H5
			if (this.$wanlshop.wanlsys()) {
				this.wxStyleTop = this.$wanlshop.wanlsys()
			} else {
				setTimeout(() => {
					_this.wxStyleTop = this.$wanlshop.wanlsys()
				}, 1000)
			}
			// #endif
			if (option.invitation_code) { //分享进入 -- 获取积分 ========
				uni.setStorage({
					key: 'invitation_code',
					data: option.invitation_code,
				});
			}
			if (option.assist) { //分享进入 -- 邀请助力 ========
				uni.setStorageSync('assist', option.assist)
			}
			if (option.token) { // 商家端跳转过来的 -- 如果有其他登录信息 -- 挤掉
				console.log('商家端过来', option.token);
				let userinfo = {
					token: option.token
				}
				uni.setStorageSync("wanlshop:user", userinfo);
				this.$api.post({
					url: '/wanlshop/user/refresh',
					success: res => {
						uni.setStorageSync("wanlshop:user", res.userinfo);
						this.$store.dispatch('user/login', res);
						this.$store.dispatch('cart/login');
						this.$store.commit('statistics/edit', res.statistics);
						this.$store.commit('user/setUserInfo', res.userinfo);
						this.$forceUpdate()
						if (option.shopid) { // 商家端跳转过来查看自己店铺的
							this.$nextTick(() => {
								this.$wanlshop.to('/pages/shop/index?id=' + option.shopid)
							})
						}
						if (option.type == 'share') {
							this.showpopupShare = true
						}
					}
				});
			}
			if (option.entrance) { //第三方来源  例如：抖音 微信视频号
				uni.setStorage({
					key: 'entrance',
					data: option.entrance,
				});
			}
			if (uni.getStorageSync('wanlshop:user') && uni.getStorageSync('wanlshop:user').token) {

				this.$nextTick(() => {
					setTimeout(() => {
						//拉取聊天记录 链接聊天
						this.$store.dispatch('chat/start')
						this.$store.dispatch('user/getWechatSubscribe');
					}, 1000)
				})


				if (uni.getStorageSync('assist')) { // 触发去助力页面
					uni.navigateTo({
						url: '/pages/user/assist/helpHimOut'
					})
				}

			} else { //如果有分享信息 -- 去登录
				if (uni.getStorageSync('invitation_code') || uni.getStorageSync('assist')) {
					uni.reLaunch({
						url: '/pages/user/auth/auth'
					})
				}
			}

			this.$nextTick(() => { //抽奖是否展示
				setTimeout(() => {
					_this.jdzpShow = _this.$store.state.common.appConfig.prizes === 'Y' ? true : false
				}, 2000)
			})
			this.getList()
			this.getSwiperData()
			this.getVideoInfo()
			// #ifdef H5
			this.h5login()
			// #endif


		},
		mounted() {},
		beforeDestroy() {

			this.clearAnimationFrame();
		},
		// 添加分享钩子
		onShareAppMessage() {
			let DOMshop = this.$refs.wanlIndexShoprefs
			let path = `/pages/tabbarcompotant/index/landlord?id=${this.option.id}`
			if (this.indexTabs == 1 && DOMshop && DOMshop.swiperCurrent == 2) {
				path =
					`/pages/tabbarcompotant/index/landlord?type=ms&invitation_code=${uni.getStorageSync('wanlshop:user').uuid || ''}`
			} else {
				path =
					`/pages/tabbarcompotant/index/landlord?invitation_code=${uni.getStorageSync('wanlshop:user').uuid || ''}`

			}
			return {
				imageUrl: "https://img.aibbyp.com/wechatUser/yhfx.png",
				path: path,
				success: (res) => {},
				fail: (err) => {}
			};
		},
		onShow() {
			let _this = this
			uni.getNetworkType({
				success: function(res) {
					if (res.networkType == 'none') {
						setTimeout(() => {
							_this.onshowMethods()
						}, 200)
						return
					} else {
						_this.onshowMethods()
					}

				}
			});



		},
		methods: {
			onshowMethods() {
				let _this = this
				this.videoStop()
				this.getLocation()
				this.setloadData()
				if (this.userInfo && this.userInfo.token) {

					if (uni.getStorageSync('invitation_code')) { // 触发获取积分
						this.getTrigger()
					}
					this.getVideoInfo1()
					if (uni.getStorageSync('entrance')) { //第三方进入
						if (uni.getStorageSync('entrance') == 'douyin') {
							console.log('抖音进入');
							this.gethomePop()
						}
						if (uni.getStorageSync('entrance') == 'TencentAD') {
							console.log('微信朋友圈广告');
							this.gethomePop()
						}
					}
					let openid = uni.getStorageSync('openid').openid
					if (!openid) {
						// #ifdef MP-WEIXIN
						this.getOpenid()
						// #endif
					} else {
						this.openid = openid
					}
				}

			},
			gethomePop() { //获取首页优惠券
				this.$api.get({
					url: '/index/homePop',
					success: res => {
						if (res.pop_type == 1) {
							this.homePopList = res.list
							this.showmask = true
						}
					}
				})
			},
			tjgz(data) {
				this.tjgzNumber = data
				if (data == 0) {
					this.videotype = 0
				}
				if (data == 1) {
					this.videotype = 2
				}
				if (data == 2) {
					this.videotype = 1
				}
				this.PayVideo = []
				this.getVideoInfo()
			},
			//顶部tab点击
			tabClick(index) {
				console.log('顶部tab点击 索引', index);
				this.tabCurrentIndex = index;

				this.getloadData()
			},
			onShare() {
				this.showpopupShare = false
			},

			async shengqingjiaru(data, index) {
				const shouldProceed = await this.$wanlshop.setrequestSubscribeMessage([
					'BH4v9RYDXCDOesZmSA4gUOQSIro5xIiOYkCnGYVeORk',
				])
				if (shouldProceed) {
					this.$api.post({
						url: '/worker/task/conflictOrder',
						data: {
							type: 2,
							order_id: data.id,

						},
						success: res => {
							let _this = this
							if (res.conflict) {
								uni.showModal({
									title: `确定申请?`,
									content: res.msg,
									success: function(res) {
										if (res.confirm) {
											_this.getapplyJoin(data, index)
										} else if (res.cancel) {}
									}
								});
							}
						}
					})


				}
			},
			getapplyJoin(data, index) { //确定接单
				this.$api.post({
					url: '/worker/recruit/applyJoin',
					data: {
						id: data.id
					},
					success: res => {
						this.$wanlshop.msg('操作成功')
						this.setloadData()
					}
				})
			},
			async lijiqiangdan(item, index) {
				const shouldProceed = await this.$wanlshop.setrequestSubscribeMessage([
					'BH4v9RYDXCDOesZmSA4gUOQSIro5xIiOYkCnGYVeORk',
				])
				if (shouldProceed) {
					this.$api.post({
						url: '/worker/task/grabOrder',
						data: {
							id: item.id
						},
						loadingTip: '抢单中...',
						success: res => {
							let navItem = this.navListSwiper[this.tabCurrentIndex];
							navItem.list.splice(index, 1)
							// this.$wanlshop.to('/pages/craftsman/qiangdanchenggong?id=' + res.order_id)
							this.$wanlshop.msg('抢单成功')
						},
						fail: error => {

						}
					})
				}

			},
			xiangqing(goods, index, key) {

				if (key == 0) {
					this.$wanlshop.to('/pages/craftsman/details?me=null&id=' + goods.id)
				}
				if (key == 1) {
					this.$wanlshop.to('/pages/craftsman/company/recruit?id=' + goods.id)
				}
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.detail.current
				this.getloadData()
			},
			getloadData() {
				if (this.triggered1 === false) {
					this.triggered1 = true
					let navItem = this.navListSwiper[this.tabCurrentIndex]
					navItem.current_page = 1
					navItem.loadingType = 'more'
					navItem.list = []
					setTimeout(() => {
						this.loadData()
						this.triggered1 = false
					}, 300)
				}

			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let navItem = this.navListSwiper[this.tabCurrentIndex];
				let index = this.tabCurrentIndex;
				let state = navItem.state;
				let status = navItem.key
				if (source == 'search') {
					navItem.current_page = 1
					navItem.loadingType = 'more'
					navItem.list = []
				}
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				let data = {
					status: status,
					page: navItem.current_page
				}
				let url
				if (index == 0) {
					url = '/worker/task/taskList'
				}
				if (index == 1) {
					url = '/worker/recruit/recruitList'
				}
				// 获取列表
				this.$api.get({
					url: url,
					data: data,
					loadingTip: '加载中',
					success: res => {
						navItem.current_page = res.current_page; //当前页码
						if (res.last_page === res.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}

						let orderList = res.data;
						orderList.forEach(item => {
							if (index == 1) {
								item.title = item.worker_type_text.name
							}
							navItem.list.push(item);
						});
						console.log(navItem)
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
					}
				});
			},
			setloadData() {

				if (this.userInfo.level == 3 || this.userInfo.level == 2) {
					let index = this.tabCurrentIndex;
					let navItem = this.navListSwiper[index];
					navItem.loadingType = 'more'
					navItem.current_page = 1
					navItem.list = []
					this.loadData()
				}

			},

			goGoods(id) { //商品详情页
				let videoContext = this.getvideoContext(this.current, 'goGoods')
				this.videoType = false
				if (videoContext) {
					videoContext.pause()
				}
				setTimeout(() => {
					this.$wanlshop.auth(`/pages/product/goods?id=${id}`)
				}, 100)
			},

			h5login() { //微信公众号登录
				const userInfor = uni.getStorageSync("wanlshop:user")
				if (userInfor && userInfor.token && uni.getStorageSync('wanlshop:code') == 0) {
					// #ifdef H5
					if (this.$jssdk.isWechat()) {
						uni.navigateTo({
							url: '/pages/user/auth-jssdk/auth-jssdk',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
						return;
					}
					// #endif
				}
			},

			getTrigger() { // 别人分享以后 进入增加积分
				this.$api.post({
					url: '/wanlshop/signin/trigger',
					data: {
						invitation_code: uni.getStorageSync('invitation_code'),
					},
					success: res => {
						uni.removeStorage({
							key: 'invitation_code',
						});
					},
					fail: error => {
						if (error.data.code == 0) {
							uni.removeStorage({
								key: 'invitation_code',
							});
						}
					}
				})
			},

			getOpenid() { // 获取openid
				uni.login({
					provider: 'weixin',
					success: res => {
						this.$api.post({
							url: '/wanlshop.user/getOpenid',
							data: {
								code: res.code
							}
						}).then(res => {
							uni.setStorageSync("openid", res.msg);
							this.openid = JSON.parse(res.msg).openid
						})
					},
					fail: err => {
						this.$wanlshop.msg(err.msg);
					}
				});

			},

			videoRefs(i) { // refs video
				return i
			},

			// canvas ------------
			getRedEnvelopes() { //当红包canvas 转完一周以后 获取金额

			},

			toggleAnimation() { // 新增动画控制方法 -- 暂停 继续
				return // 红包功能暂停
				console.log(!this.videoType);
				if (!this.videoType) {
					this.updateProgress();
				} else {
					this.clearAnimationFrame();
				}
			},

			clearAnimationFrame() { // 封装帧清除逻辑
				if (isWeapp) {
					clearTimeout(this.animationFrame);
				} else {
					cancelAnimationFrame(this.animationFrame);
				}
			},

			drawCircularProgress(ctx) {
				const center = this.canvasSize / 2;
				const radius = center - this.lineWidth;

				ctx.clearRect(0, 0, this.canvasSize, this.canvasSize);

				// 背景环
				ctx.beginPath();
				ctx.arc(center, center, radius, 0, Math.PI * 2);
				ctx.setStrokeStyle('rgba(0, 0, 0, 0.2)');
				ctx.setLineWidth(this.lineWidth);
				ctx.stroke();

				// 进度环
				const startAngle = -Math.PI / 2;
				const endAngle = startAngle + (Math.PI * 2 * this.progress);
				ctx.beginPath();
				ctx.arc(center, center, radius, startAngle, endAngle);
				ctx.setStrokeStyle('#FFDE3C');
				ctx.setLineCap('round');
				ctx.stroke();
			},

			async updateProgress() {
				if (this.videoType) return;

				this.progress += 0.002;
				if (this.progress >= 1) {
					this.getRedEnvelopes()
					this.progress = 0;
				}

				this.drawCircularProgress(this.ctx);

				// 微信强制绘制
				await new Promise(resolve => {
					this.ctx.draw(true, () => setTimeout(resolve, 0));
				});

				// 跨平台动画处理
				const animate = () => {
					if (isWeapp) {
						this.animationFrame = setTimeout(() => this.updateProgress(), 16);
					} else {
						this.animationFrame = requestAnimationFrame(() => this.updateProgress());
					}
				};
				animate();
			},



			// canvas ------------


			// ------ 视频页面 ---- 方法

			getSwiperData() { // 轮播图数据
				this.$api.get({
					url: '/wanlshop/banner/index',
					success: res => {
						this.swiperImg = res
					}
				})
			},

			clickshare() { // 点击分享按钮 打开分享弹出框
				this.shareShow = true
			},

			btnGZ() { // 关注
				this.$api.post({
					url: '/contents/setFindUser',
					data: {
						id: this.shopData[this.current].user_id
					}
				}).then(rs => {
					this.shopData[this.current].follow = !this.shopData[this.current].follow
					this.getVideoInfo1()
					uni.showToast({
						title: '关注成功',
						icon: 'none'
					})
				})
			},

			btnCollect(type) { // 收藏
				this.$api.post({
					url: '/contents/collect',
					data: {
						id: this.shopData[this.current].id,
					},
				}).then(res => {
					if (res) {
						if (type == 0) {
							this.shopData[this.current].is_collect = 1
							this.shopData[this.current].collect += 1
						}
						if (type == 1) {
							this.shopData[this.current].is_collect = 0
							this.shopData[this.current].collect -= 1
						}
					}
				})
			},

			btnLike1(type) { // 外面点赞
				this.$api.post({
					url: '/contents/likes',
					data: {
						id: this.shopData[this.current].id,
						type: 'contents'
					},
				}).then(res => {
					if (res) {
						if (type == 0) {
							this.shopData[this.current].is_like = 1
							this.shopData[this.current].likes += 1
						}
						if (type == 1) {
							this.shopData[this.current].is_like = 0
							this.shopData[this.current].likes -= 1
						}
					}
				})
			},

			btnLike(id, index, type, stauts, fType) { // 弹出框 评论点赞

				this.$api.post({
					url: '/contents/likes',
					data: {
						id: id,
						type: 'comments'
					},
				}).then(res => {
					if (res) {
						if (stauts == 'father') { //父元素点赞
							if (type == 0) { //0 否 1是
								this.commentsData[index].is_like = 1
								this.commentsData[index].likes += 1
							}
							if (type == 1) { //0 否 1是
								this.commentsData[index].is_like = 0
								this.commentsData[index].likes -= 1
							}
						}
						if (stauts == 'son') { //父元素点赞
							if (type == 0) { //0 否 1是
								this.commentsData[fType].children[index].is_like = 1
								this.commentsData[fType].children[index].likes += 1
							}
							if (type == 1) { //0 否 1是
								this.commentsData[fType].children[index].is_like = 0
								this.commentsData[fType].children[index].likes -= 1
							}
						}
					}
				})
			},

			btnHH(id, k) { //回复消息
				this.parent_id = id
				if (k == 1) {
					if (this.focus1 == true) {
						this.focus1 = false
						setTimeout(() => {
							this.focus1 = true

						}, 50)
						return
					}
					this.focus1 = true
					return
				}
				if (this.hfFocus == true) {
					this.hfFocus == false
					setTimeout(() => {
						this.hfFocus = true
					}, 50)
					return
				}
				this.hfFocus = true
			},

			hfBlur() {
				this.hfFocus = false
			},

			btnfocus() { // 打开 popup
				this.popupShow = true
			},

			btnComment() { //回复 发表评论 谈起键盘中的发送按钮
				this.$api.post({
					url: '/contents/comment',
					data: {
						openid: this.openid,
						id: this.shopData[this.current].id,
						content: this.inputValue,
						parent_id: this.parent_id,
						adcode: uni.getStorageSync('address').ad_info ? uni.getStorageSync('address').ad_info
							.adcode : '',
						city: uni.getStorageSync('address').ad_info ? uni.getStorageSync('address').ad_info.city :
							'',
					}
				}).then(res => {
					if (res) {
						this.shopData[this.current].comments += 1
						if (res.parent_id) { // 回复第一层
							this.commentsData.forEach((i, k) => {
								if (i.id == res.top_parent_id) {
									this.commentsData[k].children.unshift(res)
								}
							})
						} else { // 发表评论
							this.commentsData.unshift(res)

						}
						this.inputValue = ''
						this.parent_id = ''

						// this.commentsData = []
						// this.page = 1
						// this.getComments()

					}
				})
			},

			scrolltolowerImg() {}, // 展开文字

			scrolltolower1() { // 弹出框评论 滚动
				if (!this.scrollType) {
					return
				}
				if (!this.disableTrigger) {
					return
				}
				this.disableTrigger = false
				this.commentsPage1++
				this.getComments()
			},

			previewImage(e, k) { //预览图片
				let imgData = []
				e.forEach(a => {
					imgData.push(this.$wanlshop.oss(a))
				})

				uni.previewImage({
					longPressActions: true,
					current: k,
					urls: imgData
				});
			},

			getvideoContext(current, type) { // 获取video dom
				// #ifdef MP-WEIXIN
				/* let videoBox = this.selectComponent('#id' + current)
				return videoBox */
				// #endif

				// #ifndef MP-WEIXIN
				// #endif
				let videoBox = uni.createVideoContext('id' + current)
				console.log('videoDom', videoBox);
				return videoBox


			},

			btnPayVideo() { // 点击视频 暂停播放
				console.log('播放或者暂停视频');
				let _this = this
				this.$nextTick(() => {
					setTimeout(() => {
						let videoContext = _this.getvideoContext(_this.current, 'btnPayVideo')
						if (this.showPage) {
							videoContext.play()
							_this.videoType = false
							this.showPage = false
							this.toggleAnimation()
							return
						}
						if (_this.videoType == false && videoContext) {
							videoContext.pause()
							_this.videoType = true
							this.toggleAnimation()
						} else {
							videoContext.play()
							_this.videoType = false
							this.toggleAnimation()
						}
					}, 100)
				})

			},

			videoTimeupdate(e) { //监听video时长
				// console.log(e);
				this.timeupdate.currentTime = e.detail.currentTime //视频当前
				this.timeupdate.duration = e.detail.duration //视频总时长
			},

			videoSeeked() { // 拖动进度条结束
				this.videoType = false
				this.btnPayVideo()
			},

			getswiperImageInfo() { // 动态修改图片高度 
				// 如果有图片才会执行，不然报错
				if (this.PayVideo[this.current].imageUrl) {
					uni.getImageInfo({
						src: this.$wanlshop.oss(this.PayVideo[this.current].imageUrl[0]),
						success: (res) => {
							let endwidth = res.width / res.height
							this.swiperheight = 'height:' + (100 / endwidth) + "vw"
						},
						fail: (err) => {
							console.log('动态修改图片高度 报错', err)
						}
					});
				}
			},
			getVideoInfo1() { //获取关注数据
				this.$api.get({
					url: '/contents/index',
					data: {
						page: this.commentsPage,
						limit: 10,
						type: 2,
					},
					success: res => {
						this.gzsptotal = res.total
					}
				})
			},
			getVideoInfo(id) { // 获取数据源
				// 列表类型:0=推荐(或者不传),1=本地,2=关注
				this.$api.get({
					url: '/contents/index',
					data: {
						page: this.commentsPage,
						limit: 10,
						type: this.videotype || '',
					}
				}).then(res => {
					if (res.data) {
						res.data.forEach((a, k) => {
							if (a.type == 'video') {
								a.videoUrl = this.$wanlshop.oss(a.content_url)
							}
						})

						// onLoad 进入
						if (id) {
							this.getDetail(id)
							this.PayVideo = res.data //上下滑动总数据
							// 分享进入
							if (this.option.detailsType) {
								this.current = 0
							}

						} else {
							// 没有id 参数进入 ：刷到最后一条提前请求
							this.PayVideo = this.PayVideo.concat(res.data)
							//  如果当前是视频，自动播放
							if (this.current === 0 && this.PayVideo) {
								this.getDetail(this.PayVideo[0].id)
							}
							if (this.PayVideo[this.current].type == 'video') {
								this.$nextTick(function() {
									let videoContext = this.getvideoContext(this.current, 'getVideoInfo')
									setTimeout(() => {
										// #ifndef APP
										videoContext.pause()
										// #endif
										// 自动播放当前视频
										this.videoType = false
										videoContext.play()
									}, 1000)
								})
							}
						}
						if (res.current_page == res.last_page) {
							this.commentsPage = 1
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			changefun(e) {
				this.videoType = false
				this.changeType = true
			}, //swiper 动画结束时会触发
			animationfinish(e) { // swiper current改变时会触发change 事件 
				console.log('====');
				if (!this.changeType) {
					return
				}
				console.log('swiper动画结束');
				let current = e.detail.current
				this.commentsPage1 = 1
				// 是否展示 暂停键
				// this.videoType = false
				// 如果上个是视频 停止播放
				if (current !== 0 && this.PayVideo[this.current].type == 'video') {
					let videoContext1 = this.getvideoContext(this.current, 'animationfinish1')
					videoContext1.pause()
				}
				if (this.PayVideo[current].type == 'video') {
					// #ifdef APP
					this.$nextTick(() => { //微信公众号必须用户手动点击才能播放
						setTimeout(() => {
							let videoContext = this.getvideoContext(current, 'animationfinish2')
							videoContext.play() //开始播放当前视频
							this.getDetail(this.PayVideo[current].id)
						}, 500)
					})
					// #endif
					// #ifndef APP
					//微信公众号必须用户手动点击才能播放
					this.$nextTick(() => {
						this.getDetail(this.PayVideo[current].id)
						setTimeout(() => {
							let videoContext = this.getvideoContext(current, 'animationfinish3')
							videoContext.pause()
							setTimeout(() => {
								this.videoType = false
								videoContext.play() //开始播放当前视频
							}, 300)
						}, 100)
					})
					// #endif

				}
				//保存当前下标 播放下一个视频时停止上一个视频 防止声音重复
				this.current = current
				if (this.PayVideo[current].type == 'image') {
					this.getDetail(this.PayVideo[current].id)
					if (this.shopData[this.current] && this.PayVideo[this.current].imageUrl) {
						this.getswiperImageInfo()
					}
				}
				// 如果当前页码 马上等于数据长度 请求数据
				if (this.current + 2 == this.PayVideo.length) {
					this.commentsPage++
					this.getVideoInfo()
				}
				this.changeType = false

			},

			videoStop() { // 暂停视频播放
				console.log('暂停视频播放');
				this.videoType = false
				let videoContext = this.getvideoContext(this.current)
				if (videoContext) {
					videoContext.pause()
				}
			},

			getDetail(id) { // 获取详情数据
				this.$api.post({
					url: '/contents/detail',
					data: {
						id: id
					}
				}).then(res => {
					if (res) {
						this.commentsData = []
						if (res.type == 'image') {
							// 分享进入
							if (this.option.detailsType == 'image') {
								res.imageUrl = res.content_url
								this.PayVideo.unshift(res)
								uni.setNavigationBarTitle({
									title: res.title,
								});
								this.option.detailsType = ''
							}
							this.$nextTick(() => {
								setTimeout(() => {
									this.$set(this.PayVideo[this.current], 'imageUrl', res
										.content_url)
									this.getswiperImageInfo()
									this.$set(this.shopData, this.current, res)
									this.getComments(id)
								}, 100)
							})
						}

						if (res.type == 'video') {
							// 分享进入
							if (this.option.detailsType == 'video') {
								res.videoUrl = this.$wanlshop.oss(res.content_url)
								this.PayVideo.unshift(res)
								this.option.detailsType = ''
								uni.setNavigationBarTitle({
									title: res.title,
								});
								let videoContext = this.getvideoContext(0)
								this.$nextTick(function() {
									setTimeout(() => {
										// 自动播放当前视频
										videoContext.play()
									}, 500)
								})
							}
							this.$nextTick(() => {
								setTimeout(() => {
									this.$set(this.shopData, this.current, res)
									this.getComments(id)
								}, 100)
							})

						}

					}
				})
			},

			getComments(id) { // 评论数据
				this.$api.get({
					url: "/contents/getComments",
					data: {
						page: this.commentsPage1,
						limit: 10,
						id: this.shopData[this.current].id
					}
				}).then(res => {
					if (res.data) {
						this.disableTrigger = true
						// 总条数
						this.PayVideo[this.current].commentsTotal = res.total
						this.commentsData = this.commentsData.concat(res.data)
						if (res.current_page == res.last_page) {
							this.scrollType = false
						}
					}
				})
			},

			// ------ 视频页面 ---- 方法

			scroll(e) { // 经验 --监听滚动
				let g = this;
				this.old.scrollTop = e.detail.scrollTop
			},

			refresherrefresh(i) { // 经验 --下拉刷新
				if (this.triggered == false) {
					this.statusMore = 'loading'
					this.triggered = true
					this.timeBor = true
					this.page = 1
					// this.$refs.uWaterfall1.clear();
					this.flowList = []
					this.getList()
					this.getSwiperData()
				}
			},
			refresherrefresh1(i) { // 经验 --下拉刷新
				if (this.triggered1 == false) {
					this.getloadData()
				}
			},

			getList() { //经验 --数据
				return
				this.$api.get({
					url: '/contents/index',
					data: {
						page: this.page,
						limit: 15,
						type: this.videotype || '',
					}
				}).then(res => {
					setTimeout(() => {
						this.triggered = false
					}, 1000)

					this.timeBor = true
					res.data.forEach(a => {
						if (a.type == 'video') {
							a.videoImg = this.$wanlshop.oss(a.content_url.replace('mp4', 'jpg'))
						}
						a.content_url = this.$wanlshop.oss(a.content_url)
						a.shop.avatar = this.$wanlshop.oss(a.shop.avatar)
					})
					this.flowList = this.flowList.concat(res.data)
					if (res.current_page == res.last_page) {
						this.statusMore = 'noMore'
						this.timeBor = false
						return
					}
					// this.addRandomData(res.data);
				})
			},

			to_top() { // 返回顶部
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},

			scrolltolower(e) { // 经验 -- 下拉
				// 如果是视频 -- 下拉不用请求
				if (this.indexTabs == 1 || this.indexTabs == 2 || this.indexTabs == 4) {
					return
				}
				if (this.statusMore == 'noMore') {
					return
				}
				this.currentIndex != 1 ? e.class = true : e.class = false
				this.timeStamp = e

				if (this.timeBor) {
					this.page++
					this.getList()
					this.timeBor = false
					setTimeout(() => {
						this.timeBor = true
					}, 500)
				}
			},
			ss() {
				console.log(1);
			},
			change(type, data) { // 点击
				console.log(type, data);
				// type:0 经验  1成都  2关注 3商城 4推荐
				this.page = 1
				this.to_top()
				this.indexTabs = data
				if (data == 0) {
					this.videotype = ''
					this.tjgzNumber = 0
					this.PayVideo = []
					this.getVideoInfo()
				}
			},

			getLocation() { // 获取定位
				let _this = this
				// 获取定位
				if (this.address.ad_info && this.address.ad_info.location) {
					_this.local = this.address.ad_info.city
				}
				// #ifdef MP-WEIXIN
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					geocode: true, //必须要将geocode配置为true
					success: async function(res) {
						console.log("这是您的位置信息", res);
						let address = uni.getStorageSync('address')
						if (!address) { //没有地址信息的时候 拉取接口获取
							const a = await _this.$wanlshop.qqmapsdkAddresses(res.longitude, res.latitude)
							_this.local = a.ad_info.city

						} else {
							if (res.longitude == address.location.lng && res.latitude == address.location
								.lng) {
								_this.local = address.ad_info.city
								// 如果经纬度相同，不做处理，直接使用
								return
							} else {
								const a = await _this.$wanlshop.qqmapsdkAddresses(res.longitude, res.latitude)
								_this.local = a.ad_info.city

							}

						}

					},
					fail: (e) => {
						console.log('获取失败', e);
						if (e.errMsg == 'getLocation:fail auth deny') {
							uni.showModal({
								title: '定位失败',
								content: '为了不影响您的体验请点击右上角设置打开定位权限',
								success: res => {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												console.log(res.authSetting)
											}
										});
									}
								}
							})
						}
					},
				})
				// #endif

				// #ifdef H5
				if (this.$jssdk.isWechat()) {
					// 基本完成,后端未测试,没有完善回调，1.0.8 版本暂时屏蔽
					this.$jssdk.getlocation((res) => {
						let data = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						console.log('data', data);
						this.$location.autonavi(data, (res, address) => {
							app.globalData.adcode = address.adcode;
							if (address.streetNumber) {
								let addressData = {
									ad_info: address,
									address_component: {
										district: res
									},
									location: {
										lat: data.latitude,
										lng: data.longitude,
									},
								}
								_this.address = addressData
								_this.local = addressData.ad_info.city
								uni.setStorageSync('address', addressData)
							}
							this.address.res = res
							this.address.address = [data.latitude, data.longitude]
							this.dress = res ? res : '定位失败'
						})
					})
				}
				// #endif

				// #ifdef APP
				this.$location.getLocation((res) => {
					let data = {
						longitude: res.longitude,
						latitude: res.latitude
					}
					let name = "pLocation"
					let obj = {
						k: name,
						v: false
					}

					this.$store.dispatch('m/showPermissionAlertShow', obj);

					this.$location.autonavi(data, (res, address) => {
						console.log(res)
						console.log(address.adcode)
						app.globalData.adcode = address.adcode;

						this.dress = res ? res : '定位失败'
					})
				})
				// #endif

			},

		},
		onHide() {
			console.log('onHide');
			this.showPage = true
			this.videoStop()
		},
		onUnload() {
			console.log('onUnload');
		},
		onPageNotFound() {
			console.log('onPageNotFound');
		},
	}
</script>
<style lang="scss" scoped>
	.pg70 {
		box-sizing: border-box;
		padding: 0 70rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		zoom: 0.9;

		.yhjtc {
			position: absolute;
			top: 370rpx;
			width: 610rpx;
			height: 770rpx;
			background-image: url('https://img.aibbyp.com/wechat/images/yhjbj1.png');
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.btns {
				background-image: url('https://img.aibbyp.com/wechat/images/yhjbj2.png');
				width: 552rpx;
				height: 222rpx;
				background-size: 100% 100%;
				margin-left: 46rpx;
				position: absolute;
				bottom: 0rpx;
				z-index: 3;

				.ljsy {
					background-image: url('https://img.aibbyp.com/wechat/images/yhjbj4.png');
					background-size: 100% 100%;
					width: 256rpx;
					height: 82rpx;
					text-align: center;
					line-height: 82rpx;
					margin-top: 70rpx;
				}
			}

			.mt234 {
				margin-top: 234rpx;
			}

			.yhj {
				background-image: url('https://img.aibbyp.com/wechat/images/yhjbj3.png');
				width: 476rpx;
				height: 126rpx;
				background-size: 100% 100%;
				margin: 0 0 4rpx 20rpx;
				padding: 30rpx 68rpx 32rpx 56rpx;
				color: #fff;
			}
		}

		.closeyhj {
			position: absolute;
			z-index: 4;
			bottom: -124rpx;
		}

		.f60 {
			font-size: 60rpx;
		}
	}

	.tuijianguanzhu {
		position: fixed;
		top: 220rpx;
		left: 34rpx;
		z-index: 99;

		.tuijian {
			padding: 6rpx 32rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			background: rgba(91, 91, 91, 0.7);
			color: #FFFFFF;
			font-size: 28rpx;
		}

		.guanzhu {
			background: rgba(255, 255, 255, 0.7);
			color: #3D3D3D;
		}
	}

	.blockpopup {
		::v-deep .u-mode-center-box {
			background: none;
		}
	}

	.showpopupShareBox {
		background: url('https://img.aibbyp.com/wechatUser/fxbj.png');
		width: 536rpx;
		height: 498rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.mt80 {
			margin-top: 66rpx;
		}

		.qx {
			width: 180rpx;
			text-align: center;
		}

		.shareBox {
			background: #FB3E5D;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			width: 286rpx;
			height: 82rpx;
			line-height: 82rpx;
		}

		.shareBox::after {
			display: none;
		}

	}

	.listSquare {
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.forbox {
			background: #fff;
			padding: 32rpx;
			border-radius: 24rpx;
		}

		.imgtx {
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
		}

		.tags {
			background: #E9F0FC;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 4rpx 10rpx;
			margin-right: 8rpx;
			font-size: 20rpx;
			margin-bottom: 8rpx;
			white-space: nowrap;
		}

		.goodsimg {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.xxxx {
		width: 100rpx;
		height: 100rpx;
		position: relative;
		z-index: 999;
	}

	.topNav {
		width: 100%;

	}

	.backTop {
		z-index: 1000;
	}

	.weixinJl {
		width: 100%;
	}

	.kspdhb {
		position: fixed;
		z-index: 99;
		top: 250rpx;
		left: 20rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 50%;

		.jiaqian {
			width: 100%;
			text-align: center;
			position: absolute;
			top: -60rpx;
			color: #ffa516;
			left: 0;
		}

		.hbbac {
			position: absolute;
			bottom: -20rpx;
			left: 0rpx;
			background-image: url('https://img.aibbyp.com/wechatUser/hbbac.png');
			background-size: 100% 100%;
			width: 104rpx;
			height: 34rpx;
			line-height: 34rpx;
		}

		.hongbao {
			width: 52rpx;
			height: 70rpx;
			position: absolute;
			top: 20rpx;
			left: calc(50% - 26rpx);
		}

	}

	.xhdzpBox {
		position: fixed;
		z-index: 99;
		top: 200rpx;
		right: 26rpx;

		.imgxjdzp {
			width: 148rpx;
			height: 148rpx;
		}

		.scxjdzp {
			width: 32rpx;
			height: 32rpx;
			z-index: 100;
			position: absolute;
			top: 0;
			right: 0;
		}

	}

	.indexBox {
		background-image: url('https://img.aibbyp.com/wechatUser/indexbac.png');
		background-repeat: no-repeat;
		background-size: 100% 332rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.scoll-viewS {
			flex: 1;
			overflow: hidden;
		}

		.indexDataBox {
			height: 100%;
			/* #ifdef MP-WEIXIN */

			/* #endif */
		}

		.scoll-viewS {
			height: 100%;
		}

		.tabsBox {
			width: 480rpx;
		}
	}
</style>
<!-- video css -->
<style scoped lang="scss">
	.swiperrecommend {
		// height: 264rpx;
		padding: 0 26rpx;
		margin-top: 30rpx;

		.swiperImg {
			border-radius: 24rpx;
			height: 222rpx;
			width: 100%;
		}
	}


	.videoSwiper {
		height: calc(100vh - 100rpx);
	}

	.buttonOpen {
		border: none;
		padding: 0;
		background-color: transparent;
	}

	.buttonOpen::after {
		border: none !important;
	}

	.imageSwiper {
		height: 100% !important;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.acatarBox {
		position: relative;

		.acatar {
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 4rpx;
			border-radius: 50%;
		}

		.iconPlus {
			position: absolute;
			bottom: -0rpx;
			left: calc(50% - 16rpx);
			bottom: -16rpx;
			background: red;
			border-radius: 50%;
			width: 32rpx;
			height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconPlusImage {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.iconVideoStop {
		position: absolute;
		z-index: 999;
		left: calc(50% - 40rpx);
		top: calc(50% - 80rpx);
		width: 80rpx;
		height: 80rpx;
	}

	.gz {
		background: #FF7030;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 6rpx 28rpx;
	}

	.imageGoods {
		.bottom {
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx 32rpx 16rpx 32rpx;

			.timeCity {
				margin-top: 18rpx;
				padding-bottom: 18rpx;
				border-bottom: 1rpx #ccc solid;
			}

			.shop {
				width: 100%;
				background: #EEEEEE;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				height: 112rpx;
				box-sizing: border-box;
				padding-right: 20rpx;

				.imageAvatar {
					width: 112rpx;
					height: 112rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}
	}

	.imgAcatar {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
	}

	.videoGoods {
		position: absolute;
		bottom: 140rpx;
		left: 0rpx;
		z-index: 999;
		width: calc(100% - 100rpx);
		box-sizing: border-box;

		.dwShop {
			width: calc(100% - 0rpx);
			bottom: 170rpx;
			/* #ifdef MP-WEIXIN */
			bottom: 180rpx;
			/* #endif */
			padding: 32rpx 32rpx 0 32rpx;
		}


	}

	.videoGoods1 {
		bottom: 200rpx;
		/* #ifdef MP-WEIXIN */
		bottom: 260rpx;
		/* #endif */
	}

	.videoIcon {
		position: absolute;
		bottom: 240rpx;
		right: 40rpx;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.goodsImg {
		border: 1rpx #ccc dashed;
		border-radius: 10rpx;
		width: 112rpx;
		height: 112rpx;
	}



	.popupBox {
		display: flex;
		flex-direction: column;
		height: 900rpx;
		box-sizing: border-box;
		padding: 24rpx 32rpx 16rpx 32rpx;

		position: relative;

		.popupBoxScroll {
			height: 600rpx;
		}

		.popupBoxScroll1 {
			height: 848rpx;
		}

		.ml55 {
			margin-left: 56rpx;
		}


		.img {
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}

		.closeIcon {
			position: absolute;
			right: 20rpx;
			top: 10rpx
		}

		.inputBottom {
			background: #fff;
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			height: 100rpx;
			bottom: 0rpx;
			z-index: 2;
			left: 0;
			padding: 0 32rpx;
			box-sizing: border-box;

			.inputBottom {
				width: 100%;
			}

			::v-deep .uni-input-input {
				width: 100%;
				border-radius: 40rpx !important;
			}
		}



		.goodsBox {
			padding-bottom: 24rpx;
			border-bottom: 1rpx #ccc solid;
			height: 146rpx;
		}


	}


	.topBar {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-content: center !important;
		position: fixed;
		top: 20rpx;
		z-index: 999;

		.title {
			// min-width: 0;
			flex: 1;
			margin-left: -17rpx;
			padding: 0 24rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.circle {
		background: rgba(34, 34, 34, 0.4);
		border-radius: 50%;
		z-index: 2;
		height: 70px;
		width: 70px;
		position: fixed;
		top: 0;
		bottom: 441rpx;
		left: 31rpx;

		margin: auto;

		.red {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: 3;
			height: 35px;
			width: 35px;
		}
	}

	.uniInput {
		/* #ifdef MP-WEIXIN */
		height: 60rpx !important;
		border-radius: 40rpx !important;
		background: #eee;
		padding-left: 30rpx;
		box-sizing: border-box;
		height: 100%;
		/* #endif */
		height: 100%;

		::v-deep .uni-input-wrapper {
			height: 60rpx;

			.uni-input-input {
				border-radius: 40rpx !important;
				background: #eee;
				padding-left: 30rpx;
				box-sizing: border-box;
				height: 100%;
			}

			.uni-input-placeholder {
				color: #3d3d3d;
				z-index: 2;
				padding-left: 30rpx;
				font-size: 24rpx;
				box-sizing: border-box;
			}
		}

	}

	.swiper {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 88rpx);

		/* #endif */
		.imgSwiper {
			width: 100vw;
			max-height: 1260rpx !important;
		}



		.bottomBox {
			width: 100%;
			position: fixed;
			bottom: 100rpx;
			/* #ifdef MP-WEIXIN */
			bottom: 176rpx;
			/* #endif */
			display: flex;
			height: 100rpx;
			padding: 16rpx 32rpx 16rpx 16rpx;
			align-items: center;
			box-sizing: border-box;
			background: #fff;
			z-index: 99;



		}

		.imageBox {
			position: fixed;
			bottom: 200rpx;
			/* #ifdef MP-WEIXIN */
			bottom: 270rpx;
			/* #endif */
			background: #fff;
			width: 100%;
			border-radius: 16rpx 16rpx 0 0;
		}

		.new-swiper-item {
			width: 100%;
			height: calc(100% - 174rpx);
			/* #ifdef H5 */
			height: calc(100vh - 190rpx);
			/* #endif */
			position: relative;

			.commentsBox {
				padding: 0 28rpx;

				.img {
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					margin-top: 20rpx;
				}
			}
		}

		.new-swiper-item-image {
			padding-bottom: 110rpx;
		}

		.uni-bg-black {
			background: black;
		}

		.uni-bg-black1 {
			background: #fff;
		}
	}

	.video {
		width: 100%;
		height: calc(100vh - 190rpx);
		/* #ifdef H5 */
		height: calc(98vh - 88rpx);
		/* #endif */
		position: relative;
		z-index: 998;
	}

	.left_box {
		position: fixed;
		bottom: 90rpx;
		left: 24rpx;

		.ke_context {
			overflow-y: scroll;
			max-height: 300rpx;
			white-space: pre-wrap;
			width: 700rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			white-space: pre-wrap;
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
		}

		.height {
			margin-bottom: 40rpx;
		}

		.ren {
			margin: 20rpx 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
		}

		.auto {
			display: flex;
			align-items: center;
			width: 310rpx;
			height: 60rpx;
			margin-top: 24rpx;
			opacity: 1;
			border-radius: 8rpx;
			padding-left: 10rpx;

			cover-view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 90px;
				text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
			}

			cover-image {
				margin-right: 10rpx;
				height: 28rpx;
				width: 26rpx;
			}
		}

		.ke {
			display: flex;
			align-items: center;
			width: 310rpx;
			height: 60rpx;
			background: rgba(0, 0, 0, 0.3);
			opacity: 1;
			border-radius: 8rpx;
			padding-left: 10rpx;

			cover-view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 90px;
				text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
			}

			cover-image {
				margin-right: 10rpx;
				height: 40rpx;
				width: 40rpx;
			}
		}
	}

	.H_T {
		z-index: 2;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		position: absolute;
		padding: 0 30rpx;
		background: transparent;
		justify-content: space-between;

		.back {
			height: 48rpx;
			width: 48rpx;
		}

		.search {
			height: 48rpx;
			width: 48rpx;
		}
	}

	.right_box {
		width: 100rpx;
		position: absolute;
		z-index: 2;
		bottom: 60rpx;
		right: 12rpx;
		display: flex;
		flex-direction: column;

		.top1 {
			position: relative;
			height: 124rpx;

			.avatar_img {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}

			.add_img {
				position: absolute;
				z-index: 99;
				width: 48rpx;
				height: 48rpx;
				bottom: 10rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}

		.top2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 37rpx;

			.t_img {
				height: 72rpx;
				width: 72rpx;
				margin-bottom: 10rpx;
			}

			.font_t {
				font-size: 26rpx;
				font-family: SF Pro Text;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);

				text-shadow: 0px 1rpx 1rpx rgba(0, 0, 0, 0.4);
				text-align: center;
			}
		}

	}
</style>